import React, {Component} from 'react';
import {Checkbox, Col, Form, Input, Mentions, Modal, Row} from 'antd/lib/index';
import post from "../../../util/requestUtil";
import {Select} from "antd/es";


const FormItem = Form.Item;
const {Option} = Mentions;

/*@Form.create()*/
class userAdd extends Component {

    state = {isDelay: true}

    handleOk = (data) => {
        this.props.form.validateFields((err, fieldsValue) => {
            if (err) return;
            post('/userApi/users/add', fieldsValue).then(res => {
                // 返回成功处理
                this.props.handleCreateModal()
                this.props.form.resetFields()
            })
        });


    }

    handleCancel = () => {
        this.props.handleCreateModal()
        this.props.form.resetFields()
    }

    onChange = (value, dateString) => {
        if (value == 1) {
            this.setState({isDelay: true})
        } else {
            this.setState({isDelay: false})
        }
    }

    onOk(value) {
        console.log('onOk: ', value);
    }

    handlePriority = (rule, value, callback) => {
        let rgx = /^[0-9]\d*$/
        if (value == "") {
            callback(new Error("优先级不能为空！"));
        }
        else if (rgx.test(value)) {
            var num = parseInt(value);
            const parms = [-1,num]
            post('/sms/channel/isRepeatPriority', parms).then(res => {
                if(res.isRepeat){
                    callback(new Error("优先级重复,请重新输入！"));
                }else {
                    callback();
                }
            });
        }
        else if(!rgx.test(value)) {
            callback(new Error('请输入正确的优先级! 例如(1,2,3...)！'))
        }
    }


    render() {
        const {modalVisible, form: {getFieldDecorator}} = this.props;
        const {isDelay} = this.state;
        const {TextArea} = Input;
        const r1 =  {
            "id":"1",
            "name":"管理员"
        };
        const r2 =  {
            "id":"2",
            "name":"超管"
        };
        const roleList = [r1,r2];
        const  formItemLayout = {
            labelCol: {//标签位的格栅数量
                sm: {span: 8},
                xxl: {span: 6},
            },
            wrapperCol: {//表单的格栅数量
                sm: {span: 16},
                xxl: {span: 18},
            },
        };
        return (

            <Modal
                title="添加用户"
                visible={modalVisible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={700}
            >

                <Form
                    {...formItemLayout}
                >
                    <Row gutter={12}>
                        <Col sm={12} xxl={24}>
                            <FormItem label="用户名">
                                {getFieldDecorator('name', {
                                    rules: [{
                                        required: true,
                                        message: '用户名不能超过50个字符!',
                                        max: 50,
                                    }]
                                })(
                                    <Input name="name"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col sm={12} xxl={24}>
                            <FormItem label="编号（教师号 / 学号）">
                                {getFieldDecorator('no', {
                                    rules: [{
                                        required: true,
                                        message: '编号不能超过50个字符',
                                        max:50,

                                    }]
                                })(
                                    <Input name="no"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col sm={12} xxl={24}>
                            <FormItem label="性别">
                                {getFieldDecorator('sex', {
                                    rules: [{
                                        required: true,
                                        message: '备注不能超过200个字符!',
                                        max: 200,
                                    }]
                                })(
                                    <Select defaultValue={"--"} >
                                        <Option value={"男"}>男</Option>
                                        <Option value={"女"}>女</Option>
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col sm={12} xxl={24}>
                            <FormItem label="手机号">
                                {getFieldDecorator('phone', {
                                    rules: [{
                                        validator: this.handlePriority
                                    }]
                                })(
                                    <Input name="phone"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col sm={12} xxl={24}>
                            <FormItem label="邮箱">
                                {getFieldDecorator('email', {
                                    rules: [{
                                        validator: this.handlePriority
                                    }]
                                })(
                                    <Input name="email"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col sm={12} xxl={24}>
                            <FormItem label="生日">
                                {getFieldDecorator('birthday', {
                                    rules: [{
                                        validator: this.handlePriority
                                    }]
                                })(
                                    <Input name="birthday"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col>
                            <FormItem label="角色">
                                {getFieldDecorator('roleIds', {
                                    initialValue: [],
                                })(
                                    <Checkbox.Group>
                                        {roleList.map(role => (
                                            <Checkbox key={role.id} value={role.id}>{role.name}</Checkbox>
                                        ))}
                                    </Checkbox.Group>,
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        );
    }
}

const UserAdd = Form.create()(userAdd);
export default UserAdd;
